<template>

  <div class="block" style="margin-top: 400px">
    <el-scrollbar>
<!-- 走马灯开始-->

      <template>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="b in bannerArr" :key="b">
            <img :src="'http://localhost:9080/' + this.b.url" width="100%" alt="">
          </el-carousel-item>
        </el-carousel>
      </template>


<!--    走马灯结束-->

<!--    商品卡片开始-->
      <div style="position: relative; margin-top: 60px">
    <el-row :gutter="20">
      <el-col :span="6" v-for="p in productArr">
        <el-card>
          <a :href="'/detail.html?id='+p.id">
            <img :src="p.url" width="100%" height="233">
          </a>
          <p style="font-size: 14px;height: 30px">
            <a :href="'/detail.html?id='+p.id">
              {{p.title}}
            </a>
          </p>
          <p>
            <b>￥{{p.price}}</b>
            <span style="float: right">销量:{{p.saleCount}}</span>
          </p>
        </el-card>
      </el-col>
    </el-row>
      </div>
<!--    商品卡片结束-->


<!--    底栏开始-->
        <div style="background-image: url('./src/assets/wave.png');height: 90px"></div>
        <div style="background-color: #282c30;color: #666;text-align: center;padding: 50px 0">
          <p>老天保佑不出bug</p>
          <p>老天保佑暴瘦二十斤</p>
          <p>老天保佑暴富暴富</p>
        </div>
<!--    底栏结束-->
    </el-scrollbar>
  </div>

</template>

<script>



export default {
  data(){
    return{
      bannerArr: [],
      productArr: []

    }
  },
  methods: {
    loadProductList(){
      let url = 'http://localhost:9080/products';
      console.log('url=' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {

          this.productArr = jsonResult.data;

          console.log(this.productArr)

        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    loadBannerList(){
      let url = 'http://localhost:9080/banners';
      console.log('url=' + url);

      this.axios.get(url).then((response) => {

        let jsonResult = response.data;
        if (jsonResult.state == 20000) {

          this.bannerArr = jsonResult.data;

          console.log(this.bannerArr)

        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {

    this.loadBannerList();
    this.loadProductList();
  }
}
</script>

<style>


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*使得导航栏整齐*/
.el-menu.el-menu--horizontal{
  border-bottom: 0;
}

.page-scroll {
  height: 100%;

}



.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;

}

</style>